<template>
    <div>
        <div class="title_box">
          <div class="iconfont icon-left" @click="$router.go(-1)"></div>
          <div class="title">登录</div>
          <div></div>
        </div>
        <div class="box">
            <p class="logo">LOGO</p>
            <p>
                账号：<input type="text" ref="userphone">
            </p>
            <p>
                密码：<input type="text" ref="password">
            </p>
            <div>
                <button class="login" @click="login">登录</button>
                <p class="register" @click="$router.push('/register')">去注册</p>
            </div>
        </div>
        <div class="accredit">
            <div>
                <input type="checkbox" :checked="checkedVal" @click="checkedVal = !checkedVal"> 我阅读并同意服务条款
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    data() {
        return {
            checkedVal: false
        }
    },
    methods:{
        login(){
           if(this.checkedVal){
               let data = this.$store.getters.getData.user
               for(let i = 0; i<data.length; i++){
                   if(this.$refs.userphone.value == data[i].userphone && this.$refs.password.value == data[i].password){
                       sessionStorage.setItem('loginStatus',true);
                       this.$router.push({path:"/user"})
                       this.$store.commit("userInfoFun",data[i].username)
                   }else{
                       Toast.fail('请注册');
                   }
               }
           }else{
               Toast.fail('请授权');
           }
        }
    },
}
</script>

<style lang="less" scoped>
.login{
    margin-top: 50px;
    background: #43B984;
    color: #fff;
    width: 100%;
    border: none;
    padding: 10px 0;
}
.register{
    text-align: right;
    margin: 10px 0;
    font-size: 18px;
    color: #128EAC;
}
.accredit{
    position: absolute;
    bottom: 50px;
    left: 50%;
    margin-left: -90px;
    font-size: 16px;
    input{
        margin-right: 6px;
    }
}
.box{
    width: 380px;
    margin: 0px auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -190px;
    margin-top: -200px;
    // border: 1px solid #333;
    font-size: 24px;

    p{
        width: 100%;
        padding: 10px 0px;
        input{
            border: none;
            border-bottom: 1px solid #333;
            background: transparent;
        }
        &.logo{
            text-align: center;
            margin-bottom: 50px;
        }
    }
}

    .title_box {
      height: 60px;
      line-height: 60px;
      padding: 7px 0px;
      text-align: center;
      background: #fff;
      border-bottom: 1px solid #E8E8E8;
      display: flex;
      justify-content: space-around;
      div:nth-child(odd){
          flex: 1;
          font-size: 18px;
      }
      .title {
        flex: 6;
        font-size: 20px;
      }
    }
</style>